<template>
  <div class="box">
    <div class="cover"></div>
    <heador></heador>
    <p>{{count}}</p>
    <p>{{fullName}}</p>
    <p>ModuleA:{{textA}}</p>
    <p>ModuleB:{{textB}}</p>
    <!-- <p>ModuleC:{{textC}}</p> -->
    <p>ModuleAtextAPlus:{{textPlus}}</p>
    <!-- <todo></todo> -->
    <transition name="fade">
    <router-view/>
    </transition>
    <router-link to="/app">App</router-link>
    <router-link to="/login">login</router-link>
    <footor></footor>
  </div>
</template>
<script>
import Heador from './layout/header.vue'
import Footor from './layout/footer.vue'
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
// import Todo from './views/todos/todo.vue'
export default {
  data () {
    return {
      test: '111aazhangsa1111n111222',
      cest: 'ssss'
    }
  },
  components: {
    Heador, Footor
  },
  mounted () {
    // let i = 1
    // this.$store.state.count = 3
    // setInterval(() => {
    //   this.$store.commit('updateCount', { num1: i++, num2: 3 })
    // }, 1000)
    // this.$store.dispatch('updateCountAsync', { num: { num1: 5, num2: 10 }, time: 2000 })
    // this.updateCountAsync({ num: { num1: 5, num2: 10 }, time: 2000 })
    // setInterval(() => {
    //   this.updateCount({ num1: i++, num2: 3 })
    // }, 1000)
    // this.updateText(123)
    // this['a/updateText']('123')
    // this['a/add']()
    // console.log(this.$store, this['textPlus'])
    this['b/testMutationA']()
  },

  computed: {
    ...mapState(['count']),
    ...mapState({
      textA: state => state.a.text,
      textB: state => state.b.text
      // textC: state => state.c.text
    }),
    // count () {
    //   return this.$store.state.count
    // },
    // fullName () {
    //   return this.$store.getters.fullName
    // }
    ...mapGetters({ 'fullName': 'fullName', textPlus: 'a/textPlus' })
    // textA () {
    //   return this.$store.state.a.text
    // },
    // textB () {
    //   return this.$store.state.b.text
    // }
  },
  methods: {
    ...mapActions(['updateCountAsync', 'a/add', 'b/testMutationA']),
    ...mapMutations(['updateCount', 'a/updateText'])
  }
}
</script>

<style lang="scss" scoped>
.box {
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .cover{
    position:absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color :#999;
    opacity :.9;
    z-index :-1;
  }
}

</style>
